<div class="myinfo-main">
	<div class="myinfo-right">
		<div class='myprofile'>
			<p class='title'>&nbsp;&nbsp;My Referrals</p>
    		<dl class="dl-horizontal">
              <dt>Total Success</dt>
              <dd><?php echo $totalNum?></dd>
            </dl>
            <dl class="dl-horizontal"  style="display: none;">
              <dt>Earn Promo bids</dt>
              <dd><?php echo $totalPromobid*5?></dd>
            </dl>
    		<form class="form-horizontal">
    		      <div class="form-group">
                            <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                            <div class="col-sm-5">
                                  <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                            </div>
                          <button class="btn btn-default  addItem" type="button" >+</button>
                  </div>
           </form>
          <button class="btn btn-default  addItem sendEmail" type="button" >Send</button>
		</div>
	</div>
</div>

<?php $this->beginWidget('application.components.widgets.CDialog',array(
		'id' 				=> 'success-send-dialog',
		'title'				=> 'Success Send',
		'buttons'			=>array(
				'delete-confirm-close'=>array(
					'title' => 'Close',
					'type'	=>'close'		
				)	
		) 
))?>
	<div>Invite Emails Successful!</div>
<?php $this->endWidget();?>

<script type="text/javascript">
      function IsEmail(str)     
      {     
          if(str!==undefined){    
              var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;    
              if(reg.test(str)){    
                  return true;   
              }    
          } 
          return false;   
  	 } 
	 emails=[];
	 var insertHtml='<div class="form-group">'+
         						'	<label for="inputEmail3" class="col-sm-2 control-label">Email</label>'+
       							'  <div class="col-sm-5">'+
               					'		<input type="email" class="form-control" id="inputEmail3" placeholder="Email">'+
         						'	</div>'+
    							'   <button class="btn btn-default  addItem" type="button" >+</button>'+
								'</div>';
      
      $(".form-horizontal").on('click','.addItem',function(){
			//var email=$(this).siblings().find('input').val();
			var parentHtml=$(this).parents(".form-group").after(insertHtml);
			//if(IsEmail(email)){
				//emails.push(email);
			//}
      })
      
      $(".sendEmail").on('click',function(){
			$('input[type="email"]').each(function(){
				var email=$(this).val();
				if(IsEmail(email)){
					emails.push(email);
				}
			})
			if(emails.length<=0){
				alert("Email can not be blank!");
				return false;
			}
			$('#success-send-dialog').modal('show');
			$.ajax({
				type:'POST',
				dataType:'json',
				data:{'emails':emails},
				success:function(data){
					emails=[];
					$('.form-group').not('.form-group:eq(0)').empty();
					$('input[type="email"]').eq(0).val('');
				}
			});
      })
</script>
<style>
.errorMessage {
    padding: 5px 0 0 107px;
    font-size: 12px;
    font-weight: bold;
    color: #D9534F;
}
.myinfo-main .myinfo-right .myprofile ul li .lab {
    float: left;
    line-height: 40px;
    width: 106px;
    text-align: center;
}
.alert {
    padding: 15px;
    width: 425px;
    margin-bottom: 20px;
    margin-left: 28px;
    border: 1px solid transparent;
    border-radius: 4px;
}
.form-control {
    width: 100%;    
}
.btn{
	    margin-bottom: -4px;
	    margin-top: 3px;
	    margin-left: -13px;
}
.control-label {
    width: 120px;
    padding: 15px 15px;
    border-right: 1px solid #e9ecee;
    line-height: 30px;
    font-family: 'Droid Sans';
}
.sendEmail ,.sendEmail:hover{
    margin-left: 113px;
    width: 362px;
    margin-top: 10px;
	background-color:#2d3234;
	color:#fff;
	font-weight:700;
}
dl {
    margin-top: 33px;
    margin-bottom: 23px;
}
</style>